.App {
	text-align: center;
	height: 100vh;
	.header {
		position: relative;
		height: 40px;
		text-align: left;
		background-color: white;
		box-shadow: 0px 3px 3px hsla(210, 80%, 80%, 0.2);
		z-index: 5;
		.logo-wrapper {
			position: relative;
			float: left;
			width: 164px;
			height: 100%;
			transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
			vertical-align: middle;
			.background {
				width: 0;
				height: 100%;
				box-shadow: 0 0 4px hsla(210, 100%, 80%, 1);
				transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
			}
			.logo {
				display: block;
				position: absolute;
				top: 8px;
				left: 12px;
				height: 24px;
				pointer-events: none;
			}
			@media (prefers-reduced-motion: no-preference) {
				.logo {
					animation: App-logo-spin infinite 10s linear;
				}
			}
			@keyframes App-logo-spin {
				from {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(360deg);
				}
			}
			.name {
				display: block;
				position: absolute;
				top: 0;
				left: 50px;
				height: 40px;
				margin: unset;
				line-height: 40px;
				font-size: 20px;
				font-family: overpass;
				font-weight: unset;
				color: #333;
				pointer-events: none;
			}
			.tottqftech {
				display: block;
				position: absolute;
				top: 8px;
				left: 12px;
				height: 24px;
				opacity: 0;
				transition: opacity 0.3s ease-out;
			}
			.logo, .name {
				transition: opacity 0.3s ease-out 0.1s;
			}
			&:hover {
				width: 172px;
				.background {
					opacity: 1;
					width: 100%;
				}
				.logo, .name {
					opacity: 0;
					transition: opacity 0.3s ease-out;
				}
				.tottqftech {
					opacity: 1;
					transition: opacity 0.3s ease-out 0.1s;
				}	
			}
		}
		.title {
			display: inline-block;
			margin-left: 16px;
			line-height: 40px;
			font-size: 14px;
			color: #777;
			vertical-align: middle;
		}
		.repositories {
			position: relative;
			float: right;
			height: 40px;
			margin-right: 8px;
			.iconbutton {
				position: relative;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				margin-right: 8px;
				width: 40px;
				height: 40px;
				.background {
					position: absolute;
					top: 0;
					width: 100%;
					height: 0;
					box-shadow: 0 0 4px hsla(210, 100%, 80%, 1);
					transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
					opacity: 1;
					z-index: -1;
				}
				&:hover {
					.background {
						height: 100%;
						opacity: 1;
					}
				}
				img {
					width: 24px;
					height: 24px;
				}
			}
		}
	}
	.apparea {
		display: flex;
		height: calc(100vh - 40px);
		.playground {
			flex: 1;
			height: 100%;
			overflow-y: auto;
		}
	}
}


